<template>
	<view class="user-info-content" v-if="isUserInfoModalShow">
		<view class="user-info-modal">
			<view class="user-info-tip-text">授权获取你的昵称、头像</view>
			<view class="user-info-tip-text-2">确认点检身份信息核对</view>
			<button class="auth-btn" @click="getUserInfo">一键授权</button>
		</view>
		<van-icon class="close-icon" name="close" @click="closeModal" />
	</view>
</template>

<script>
	export default {
		name: "user-info-modal",
		data() {
			return {

			};
		},
		props: {
			isUserInfoModalShow: {
				type: Boolean,
				default: false
			},
		},
		methods: {
			getUserInfo() {
				var that = this;
				// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
				// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
				uni.getUserProfile({
					desc: '用于完善用户资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					async success(res) {
						uni.setStorageSync("userInfo", res.userInfo);
						getApp().globalData.userInfo = res.userInfo;
						that.$emit("allowGetUserInfo");
					},
					fail: (err) => {
						console.log('拒绝...', err);
					}
				})
			},
			closeModal() {
				this.$emit('closeModal');
			},
		},
	}
</script>

<style lang="less">
	.user-info-content {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 2;

		.close-icon {
			font-size: 30px;
			width: 30px;
			position: absolute;
			bottom: 100px;
			left: 50%;
			margin-left: -10px;
			color: #fff;
			z-index: 9;
		}

		.user-info-modal {
			z-index: 9;
			background-color: #fff;
			border-radius: 3px;
			width: 80%;
			padding: 40px 30px;
			box-sizing: border-box;
			position: absolute;
			top: 50%;
			left: 10%;
			margin-top: -50%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.user-info-tip-text {
				font-size: 16px;
				color: #000;
				font-weight: bold;
			}

			.user-info-tip-text-2 {
				font-size: 12px;
				color: #999999;
				font-weight: 500;
				margin-top: 5px;
			}

			.auth-btn {
				width: 100%;
				height: 36px;
				line-height: 36px;
				text-align: center;
				background-color: transparent;
				border: 1px solid #008aff;
				color: #008aff;
				margin-top: 30px;
				font-size: 14px;
			}
		}
	}
</style>
